﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>滑动菜单</title>

    <script src="../../js组件/jquery/jquery-latest-pack.js" type="text/javascript"></script>
    <style type="text/css">
<!--
#layoutbox {
	font-family: "宋体";
	font-size: 9pt;
	color: #000000;
	letter-spacing: normal;
	text-align: left;
	word-spacing: normal;
	white-space: normal;
	display: compact;
	margin: 2px;
	padding: 2px;
	height: 500px;
	width: 250px;
	border: 1px solid #333333;
	background-color: #E4E4FC;
}

.box_sub {
	height: auto;
	width: auto;
		font-family: "宋体";
	font-size: 9pt;
	color: #000000;
	background-color: #3DCDC2;
}
.box_sub div
{
            border-color: #000000;
            border: 1;
            height: 550px;
        }
.box_sub span
{

	    background-color:#aee0ea;
	    cursor:pointer;
	    width:100%;
	    margin-bottom:5px;
	}
-->
</style>

</head>
<body>
<div  id="layoutbox">
  <div class="box_sub">
  <span>东东菜单</span>
  <div>
    此处显示  class "box_sub" 的内容
  </div>
  </div>
  <div class="box_sub">
  <span>东东菜单</span>
  <div>
    此处显示  class "box_sub" 的内容
  </div>
  </div>
  <div class="box_sub">
  <span>东东菜单</span>
  <div>
    此处显示  class "box_sub" 的内容
  </div>
  </div>
  <div class="box_sub">
  <span>东东菜单</span>
  <div>
    此处显示  class "box_sub" 的内容
  </div>
  </div>
  <div class="box_sub">
  <span>东东菜单</span>
  <div>
    此处显示  class "box_sub" 的内容
  </div>
  </div>
  <div class="box_sub">
  <span>东东菜单</span>
  <div>
    此处显示  class "box_sub" 的内容
  </div>
  </div>
  <div class="box_sub">
  <span>东东菜单</span>
  <div>
    此处显示  class "box_sub" 的内容
  </div>
    <div>
    此处显示  class "box_sub" 的内容
  </div>
  </div>
</div>
</body>
<script type="text/javascript">
function showandhide()
{
    var divs =$("#layoutbox>div");
    divs.each(
        function(i)
        {
                divo = $(this);
                divo.find("div").toggle(500);
                //给span添加事件
                divo.eq(0).find("span").eq(0).click(
                    function()
                    {
                        divs.find("div").each(
                            function()
                            {
                                $(this).hide(700,
                                function()
                                {
                                    $( this).parent("div").find("span").get(0).innerHTML ="显示菜单";//show text cange
                                }
                                );
                            });
                      var actdiv =   $(this).parent().find("div");
                      actdiv.toggle(700,function(){// 当完成后执行函数处理
                        if(actdiv.get(0).style.display=="none")
                        {
                           $( this).parent("div").find("span").get(0).innerHTML ="显示菜单";
                        }
                        else
                        {
                            $( this).parent("div").find("span").get(0).innerHTML ="隐藏菜单";
                        }
                     
                      });

                    }
                ); 
        }
    );
   
  //  eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 5=$("#e>2");5.8(3(i){6=$(1);6.4("2").9(b);6.c(0).4("f").c(0).g(3(){7 a=$(1).h().4("2");a.9(b,3(){j(a.k(0).l.m=="n"){1.d="显示菜单"}o{1.d="隐藏菜单"}});5.4("2").8(3(){$(1).p()})})});',26,26,'|this|div|function|find|divs|divo|var|each|toggle||500|eq|innerHTML|layoutbox|span|click|parent||if|get|style|display|none|else|hide'.split('|'),0,{}));
        
}
alert($("#layoutbox").find("div:class").html());
showandhide();

</script>
</html>
